{extend name='public/modal'}
{block name='content'}
<div class="layui-fluid lotus-form">
    <div class="layui-row">
        <form class="layui-form layui-form-pane" id="lotus-edit-form" lay-filter="lotus-form-filter" method="post">

            <input name="id" type="hidden">

            <div class="layui-form-item">
                <label class="layui-form-label">角色名</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" id="title" lay-verify="required" name="title"
                        placeholder="请输入角色名" type="text">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    状态
                </label>
                <div class="layui-input-block">
                    <select id='status' lay-filter="status" name="status">
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">
                    权限节点
                </label>
                <div class="layui-input-block zTreeDemoBackground left" style="border:solid 1px  #e6e6e6 ">
                    <ul class="ztree" id="tree"></ul>
                </div>
            </div>
        </form>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="submit_btn" lay-filter="toSubmit" lay-submit="" style="margin-left: 30%">
                    提交
                </button>
            </div>
        </div>

    </div>
</div>
<link href="/static/lib/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css">
<script src="/static/lib/ztree/js/jquery.ztree.core.js" type="text/javascript"></script>
<script src="/static/lib/ztree/js/jquery.ztree.excheck.js" type="text/javascript"></script>
<script>
    layui.use(['laydate', 'form', 'upload', 'layer', 'jquery'], function () {
        var laydate = layui.laydate
            , upload = layui.upload
            , layer = layui.layer
            , $ = layui.jquery
            , form = layui.form;
        form.render();
    });
</script>
<script>
    var checked_ids, auth_rule_ids = [];
    var tree = $("#tree");
    var zTree;
    var setting = {
        check: {
            enable: true
        },
        view: {
            dblClickExpand: true,
            showLine: true,
            showIcon: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootpid: ""
            },
            key: {
                name: "title"
            }
        }
    };
    //加载树形菜单
    $.ajax({
        url: "{:url('admin/user/getJson')}",
        type: "post",
        dataType: "json",
        cache: false,
        data: {
            id: '{$authGroup.id}'
        },
        success: function (data) {
            zTree = $.fn.zTree.init(tree, setting, data);
            //遍历节点展开节点(如不需要请屏蔽)
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            var nodes = treeObj.getNodes();
            checked_ids = treeObj.getCheckedNodes();
            $.each(checked_ids, function (index, item) {
                auth_rule_ids.push(item.id);
            });
            for (var i = 0; i < nodes.length; i++) { //设置节点展开
                treeObj.expandNode(nodes[i], true, false, true);
            }
        }
    });

    $("#submit_btn").click(function (event) {
        var checked_ids, auth_rule_ids = [];
        checked_ids = zTree.getCheckedNodes(); // 获取当前选中的checkbox
        $.each(checked_ids, function (index, item) {
            auth_rule_ids.push(item.id);
        });
        console.log(auth_rule_ids);
        var title = $('input[name=title]').val();
        var status = $('select[name=status]').val();
        $.ajax({
            url: "{:url('admin/user/editRule')}",
            type: 'post',
            dataType: 'json',
            data: {
                id: '{$authGroup.id}',
                title: title,
                status: status,
                rules: auth_rule_ids,
            },
        })
            .done(function (data) {
                if (data.code == 0) {
                    layer.msg(data.msg, { icon: 2, time: 1000 });
                } else {
                    layer.msg(data.msg, { icon: 1, time: 500 }, function () {
                        $("#reset").click();
                        lotus.reload();
                    });
                }
            })
    });

    var lotusFormVal = {
        'id': "{$authGroup.id}",
        'title': "{$authGroup.title}",
        'status': "{$authGroup.status}"
    }
    lotus.editForm(lotusFormVal);


</script>
{/block}